<template>
  <div class="evaluate">
    <div class="evaluate_container">
      <div class="evaluate_top">
        <img
          class="shopIcon"
          :src="orderInfo.shopIcon"
          alt=""
        >
        <span class="shopName">{{orderInfo.shopName}}</span>
      </div>
      <!--<c-star :imgs="imgs" :width="width" :height="height" :starValue="starValue" @ok="back"/>-->
      <div class="evaluate_star">
        <span>给商家打分</span>
        <c-star
          :imgs="imgs"
          :width="width"
          :height="height"
          :starValue="starValue"
          @ok="back"
        />
      </div>
      <div class="evaluate_star">
        <span>给配送打分</span>
        <c-star
          :imgs="imgs"
          :width="width"
          :height="height"
          :starValue="starValue"
          @ok="back"
        />
      </div>
      <div class="evaluate_account">
        <textarea
          class="textarea"
          name=""
          id=""
          cols="30"
          rows="10"
          placeholder="写下您对配送和商家的评价吧"
        ></textarea>
        <div class="evaluate_imgCon"></div>
      </div>
      <div class="upload">
        <div
          class="item"
          @click="uploadFile1"
        >
          <img
            :src="upload"
            alt=""
          >
          <input
            ref="file1"
            type="file"
            id="file1"
          />
        </div>
        <div
          class="item"
          @click="uploadFile2"
        >
          <img
            :src="upload"
            alt=""
          >
          <input
            class="file2"
            type="file"
          />
        </div>
        <div
          class="item"
          @click="uploadFile3"
        >
          <img
            :src="upload"
            alt=""
          >
          <input
            class="file3"
            type="file"
          />
        </div>
      </div>
      <div class="submit">提交</div>
    </div>
  </div>
</template>

<script>
import Start from '@/components/doStar'
import upload from '../../../static/images/upload.png'

export default {
	name: 'evaluate',
	data() {
		return {
			orderInfo: {},
			width: 30,
			height: 30,
			starValue: 1,
			imgs: [
				'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/off.png',
				'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/harf.png',
				'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/one.png',
			],
			upload,
		}
	},

	components: {
		'c-star': Start,
	},

	computed: {},

	methods: {
		back(score) {},

		/**
		 * 上传第一张图片
		 */
		uploadFile1() {
			
		},
	},

	mounted() {
		this.orderInfo = JSON.parse(this.$store.state.orderInfo)
	},
	onUnload() {},
}
</script>

<style lang="scss" scoped>
@function rpx($value) {
	@return $value * 1rpx;
}
.evaluate {
	display: flex;
	flex-direction: row;
	justify-content: center;
	overflow: auto;
	.evaluate_container {
		width: 95%;
		/*height: 500px;*/
		padding-bottom: 20px;
		background-color: #ffffff;
		border: 1px solid rgba(204, 204, 204, 0.5);
		border-radius: 6px;
		padding-top: 10px;
		margin-top: rpx(19);
		margin-bottom: rpx(30);
		.evaluate_top {
			width: 95%;
			height: rpx(120);
			border-bottom: 1px solid rgba(204, 204, 204, 0.5);
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			.shopIcon {
				width: 90rpx;
				height: 90rpx;
				display: inline-block;
				margin-right: 15px;
			}
			.shopName {
				font-size: 16px;
			}
		}
		.evaluate_star {
			width: 95%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20px;
			span {
				font-size: 16px;
				display: inline-block;
				margin-bottom: 15px;
			}
		}
		.evaluate_account {
			width: 95%;
			height: 200rpx;
			margin: 10px auto;
			border: 1px solid rgba(204, 204, 204, 0.5);
			.textarea {
				width: 100%;
				height: 200rpx;
				font-size: 14px;
				padding: 6px;
			}
			.evaluate_imgCon {
			}
		}
		.upload {
			display: flex;
			padding: 15px 10px 20px;
			justify-content: space-between;
			.item {
				& img {
					width: 80px;
					height: 80px;
				}
				& > input {
					display: none;
				}
			}
		}
		.submit {
			height: 45px;
			line-height: 45px;
			margin: 0 10px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			font-size: 14px;
			text-align: center;
			background-color: #fecb55;
		}
	}
}
</style>
